<template>
  <div class="container mx-auto px-4 py-8">
    <div class="flex gap-6">
      <!-- 侧边栏 -->
      <div class="w-64 flex-shrink-0">
        <div class="bg-gray-800 rounded-lg p-4">
          <el-menu
            :default-active="activeMenu"
            class="!bg-transparent !border-none"
            router
          >
            <el-menu-item index="/user/center">
              <el-icon><i class="i-carbon-user"></i></el-icon>
              <span>个人中心</span>
            </el-menu-item>
            <el-menu-item index="/user/collection">
              <el-icon><i class="i-carbon-star"></i></el-icon>
              <span>我的收藏</span>
            </el-menu-item>
            <el-menu-item index="/user/history">
              <el-icon><i class="i-carbon-time"></i></el-icon>
              <span>观看历史</span>
            </el-menu-item>
            <el-menu-item index="/user/wallet">
              <el-icon><i class="i-carbon-wallet"></i></el-icon>
              <span>我的钱包</span>
            </el-menu-item>
          </el-menu>
        </div>
      </div>

      <!-- 主内容区 -->
      <div class="flex-1">
        <slot />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const route = useRoute()
const activeMenu = computed(() => route.path)
</script>

<style scoped>
:deep(.el-menu-item) {
  color: rgba(255, 255, 255, 0.8) !important;
}

:deep(.el-menu-item:hover) {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

:deep(.el-menu-item.is-active) {
  color: #00da5a !important;
  background-color: rgba(0, 218, 90, 0.1) !important;
}
</style>